<template>
  <div class="page-container-padding">
    <div>
      <span>
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          type="daterange"
          size="mini"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-button type="primary" size="mini" @click="toQueryWrittenArticle">
          查询
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthWrittenArticle">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthWrittenArticle">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearWrittenArticle">
          全年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearWrittenArticle">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearWrittenArticle">
          下一年
        </el-button>
      </span>
    </div>
    <div style="margin-top: 6px">
      <el-table border stripe :data="articleList">
        <el-table-column
          prop="create_date"
          label="日期"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="admin_name"
          label="姓名"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="300px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="article_type_zh"
          label="类型"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="words"
          label="字数"
          width="70px"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="annex"
          label="附件"
          width="200px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.annex">
              <vab-icon
                :icon="['fas', 'download']"
                @click="toDownloadFile(scope.row)"
              ></vab-icon>
              <span class="annex-file" @click="toViewFile(scope.row)">
                {{ scope.row.annex }}
              </span>
            </span>
            <span v-else><span>无</span></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="examine_zh"
          label="审核状态"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="examine_explain"
          label="审核评价"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
    <div></div>

    <!-- 预览弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      width="900px"
      top="15px"
      :visible.sync="showDocxView"
    >
      <div slot="title">
        <div style="display: flex; align-items: center; margin-right: 40px">
          <el-input
            v-model.trim="examineObj.examine_explain"
            placeholder="在此填写审核意见"
          ></el-input>
          <el-button
            style="margin-left: 6px"
            type="primary"
            size="mini"
            @click="toExamineArticle(1)"
          >
            通过
          </el-button>
          <el-button type="danger" size="mini" @click="toExamineArticle(-1)">
            退回
          </el-button>
        </div>
      </div>
      <div style="height: calc(100vh - 128px); overflow-y: auto">
        <div ref="docFile"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getMonthDatePoint,
    datetimeToStr,
    getYearDatePoint,
  } from '@/utils/datetimeUtils'
  import { getFileBlob, downloadFile } from '@/api/fileHandler'
  import {
    queryGroupArticle,
    examineGroupArticle,
  } from '@/api/departmentWork/articleWriting'
  export default {
    data() {
      return {
        dateRange: [],
        page: 1,
        pageSize: 30,
        articleList: [],
        showDocxView: false,

        examineObj: {
          aid: null,
          examine_explain: '',
          examine_state: null,
        },
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryWrittenArticle()
    },
    methods: {
      setCurrentDates() {
        this.dateRange = getMonthDatePoint(new Date(), 'current')
      },

      // 查询组员下的文章
      queryWrittenArticle() {
        const paraData = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
        }
        queryGroupArticle(paraData).then((res) => {
          this.articleList = res.data.articles
        })
      },

      // 预览文档
      toViewFile(row) {
        // window.location.href = "http://vw.usdoc.cn/?src="+fileStorage+row.annex_url
        // 设置对象数据
        this.examineObj.examine_explain = row.examine_explain
        this.examineObj.aid = row.id
        this.examineObj.examine_state = null

        this.showDocxView = true
        getFileBlob(row.annex_url).then(({ data }) => {
          this.$docxView.renderAsync(data, this.$refs.docFile)
        })
      },

      // 下载文档
      toDownloadFile(row) {
        downloadFile(row.annex_url)
      },

      // 保存审核
      toExamineArticle(flag) {
        const exmData = {
          aid: this.examineObj.aid,
          examine_state: flag,
          examine_explain: this.examineObj.examine_explain,
        }
        if (!exmData.examine_explain) {
          this.$baseMessage('请填写审核评价...', 'error')
          return
        }
        examineGroupArticle(exmData).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          this.showDocxView = false
          this.queryWrittenArticle()
        })
      },

      //点击查询
      toQueryWrittenArticle() {
        // this.setCurrentDates()
        this.queryWrittenArticle()
      },
      // 点击上一个月
      preMonthWrittenArticle() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryWrittenArticle()
      },

      // 点击下一个月
      nextMonthWrittenArticle() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryWrittenArticle()
      },

      // 点击全年
      yearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryWrittenArticle()
      },

      // 点击上一年
      preYearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryWrittenArticle()
      },

      // 点击下一年
      nextYearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryWrittenArticle()
      },
    },
  }
</script>

<style scope>
  .annex-file {
    color: #0073fc;
    cursor: pointer;
    margin-left: 4px;
  }
  .el-dialog__body .docx-wrapper {
    background-color: #fefefe;
  }
</style>
